<template>
  <div class="roomGeneralViewDetail" v-loading="loading">
    <el-row class="roomGeneralViewDetail-a">
      <el-col :span="12">
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.alarmTimeSet}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.startTimeSecond}}</el-col>
          <el-col :span="12">
            <el-input v-model.number="silentTime" prefix-icon="el-icon-time" class="startTimeSecond" :readonly="readonlySilentTime"></el-input>
            <span style="margin-right:5px;">{{roomGeneralViewManagement.minute}}</span>
            <kt-button class="btn0 boxShadowButton" :label="roomGeneralViewManagement.search" :disabled="disabledSetAlarmTime" @click="handleSetAlarmTime"/>
          </el-col>
        </el-row>
        <el-row class="height50">
          <el-col v-if="silentStatus==false" class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.alarmoff}}</el-col>
          <el-col v-else class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.alarmOn}}</el-col>
          <el-col :span="12"><el-switch v-model="silentStatus" @change="changeSwitch" active-color="#13ce66" inactive-color="#ccc"></el-switch></el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.baseInfo}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.roomNo}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.roomNo}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.resident}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.oldName}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.roomTemperatureState}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.roomTemperature}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.temperature}}</el-col>
        </el-row>
        <el-row class="height40">
          <span class="height40-span">
            <img :src="image.juxing_Small" alt />
          </span>
          <span class="height40-span">{{roomGeneralViewManagement.vitalSigns}}</span>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.inBed}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.inBed}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.heartState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.heartbeat}}</el-col>
        </el-row>
        <el-row class="height50">
          <el-col class="height50-itemName" :span="11" :push="1">{{roomGeneralViewManagement.breathState}}</el-col>
          <el-col :span="12">{{lifeRoomInfo.breath}}</el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row style="margin-top:10px;">
          <!-- <img v-if="videoFlag==false && picture==''" :src="image.shexiangtou" alt="" class="roomGeneralViewDetail-a-res"/>
          <img v-if="videoFlag==false && picture!=''" :src="picture" alt="" class="roomGeneralViewDetail-a-res"/> -->
          <div class="Ckplayer" v-if="videoFlag==false">
            <video
              id="video"
              style="object-fit:fill"
              preload="auto"
              autoplay
              playsinline="true"
              webkit-playsinline="true"
              x5-video-player-type="h5"
              x5-video-player-fullscreen="true"
              x5-video-orientation="portraint"
            ></video>
          </div>

          <div v-if="videoFlag==true"><div :class="`${languageClass ? 'alarmMessageJp' : 'alarmMessage'}`">{{roomGeneralViewManagement.videoAlarmMessage}}</div></div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-b height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessage}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span=20>
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValueTable"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span=4>
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.search"
          @click="serachAlarmTable"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-c">
      <el-table
        style="width:100%"
        :data="tableData"
        :border="false"
        :header-cell-style="tableHeaderColor"
        :row-style="tableRowStyle"
        @row-click="handleAlertClick"
      >
        <el-table-column prop="createdTime" align="center" :label="roomGeneralViewManagement.occurrenceTime" min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="alertType" :formatter="formatAlertType" align="center" :label="roomGeneralViewManagement.condition" min-width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="updateTime" align="center" :label="roomGeneralViewManagement.acknowledgingTime" min-width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="lastOperator" align="center" :label="roomGeneralViewManagement.affirmant" min-width="100" :show-overflow-tooltip="true"></el-table-column>
        <!-- by guo 2020-03-09-13:51添加  警报录像播放按钮 -->
        <el-table-column :label="roomGeneralViewManagement.opertion" min-width="50" align="center">
          <template slot-scope="scope">
            <img class="handedness" v-if="scope.row.videoPlayIconShow" :src="image.life_video_play" alt="" @click="alarmVideoPlayClick(scope.row)">
            <img class="handedness" v-if="!scope.row.videoPlayIconShow" :src="image.life_video_push" alt="" @click="alarmVideoPushClick(scope.row)">
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="total, prev, pager, next, jumper"
        :total="totalDataNumber"
        :page-size="pageSize"
        align="center"
        class="fenyeTwo">
      </el-pagination>    
    </el-row>
    <el-row style="margin-top:50px;">
      <kt-button
        v-if="alarmSurefalg"
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
      <kt-button
        v-else
        class="btn0 boxShadowButton"
        :label="roomGeneralViewManagement.confirmCompleted"
        @click="handleSureComplete"
      />
    </el-row>
    <el-row class="roomGeneralViewDetail-d height40">
      <span class="height40-span">
        <img :src="image.juxing_Small" alt />
      </span>
      <span class="height40-span">{{roomGeneralViewManagement.alarmMessageOutput}}</span>
    </el-row>
    <el-row class="roomGeneralViewDetail-e height40">
      <el-col :span=20>
        <el-date-picker
          style="width:98%;"
          :editable="false"
          v-model="timeValue"
          unlink-panels
          type="daterange"
          :start-placeholder="roomGeneralViewManagement.startDate"
          :end-placeholder="roomGeneralViewManagement.endDate"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span=4>
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.cSVOutput"
          @click="handleCsvOutput"
        />
      </el-col>
    </el-row>
    <el-row class="roomGeneralViewDetail-f height40">
      <el-col :span="4">
        <kt-button
          class="btn0 boxShadowButton"
          :label="roomGeneralViewManagement.backList"
          @click="handleBackList"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          class="btn1 boxShadowButton"
          :label="roomGeneralViewManagement.vitalSignsDetail"
          @click="handleDetail"
        />
      </el-col>
      <el-col :span="4" :offset="6">
        <kt-button
          :icon="(videoFlag && urgencySureFlag) ? 'el-icon-video-pause' : 'el-icon-video-play'"
          class="btn2 boxShadowButton"
          :label="(videoFlag && urgencySureFlag) ? roomGeneralViewManagement.confirmCompleted : roomGeneralViewManagement.urgentConfirmation"
          @click="handleUrgencySure"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
import realVideo from "../../../assets/lifeGroupimg/realVideo.png";
import juxing_Small from "../../../assets/lifeGroupimg/juxing_small.png";
import juxing_red from "../../../assets/lifeGroupimg/juxing_red.png"; 
import shexiangtou from "../../../assets/lifeGroupimg/shexiangtou.png";
import life_video_play from "../../../assets/lifeGroupimg/life_video_play.png";
import life_video_push from "../../../assets/lifeGroupimg/life_video_push.png";
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
import {baseURL} from "../../../api/http.js";
import mqtt from "mqtt"; //导入mqtt
import {
  MQTT_SERVICE,
  MQTT_USERNAME,
  MQTT_PASSWORD,
  MQTT_CLIENTID,
} from "../../../api/http.js";
export default {
  name: "RoomGeneralViewDetailWebrtc",
  data() {
    return {
      roomGeneralViewManagement: this.$t("m.roomGeneralViewManagement"), //引入 lang 里面的字符串资源,
      size:"medium",//按钮的尺寸
      id: "",
      image: { realVideo, juxing_Small ,shexiangtou,life_video_play,life_video_push},
      backgroundImage:"",
      disabledSetAlarmTime:false,//报警屏蔽时间的按钮是否可以点击
      readonlySilentTime:false,//是否可读
      silentTime:"",//报警屏蔽时间
      silentStatus:false,//报警设置开关  false---关   true---开
      silentStatusRoom:false,//用来判断房间是否设置了警报屏蔽
      alarmSurefalg:false,
      lifeRoomInfo:{
        roomNo:"",
        oldName:"",
        temperature:"",
        inBed:"",
        heartbeat:"",
        breath:"",
      },
      videoFlag:false,//默认为false 静态图片显示 视频播放隐藏  当点击了紧急按钮之后状态为true 视频播放显示  静态图片隐藏
      urgencySureFlag:false,//用于判断实时视频按钮的播放和切换  true--播放   false--停止
      tableData:[],
      timeValueTable:"",//报警列表的查询,时间
      /* 分页的 */
      currentPage:1, //初始页
      pageNum:1,//页码
      pageSize:5,//每页显示的条数
      totalDataNumber:0,//数据的总数,
      timeValue:"",//报警导出的查询时间
      pickerOptions:{
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      bedDeviceNo:"",//床垫的设备编号
      roomId:"",
      deviceNo:"",//摄像头的设备编号
      picture:"",
      alertId:"",
      isHandle:"",
      groupId:"",
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
      flashFlag:true,//flash默认是关闭的--true
      languageClass:true,

      videoSrc:"",//获取需要播放的url
      options :{
        connectTImeout: 4000,//超时连接的时间
        clientId: MQTT_CLIENTID,
        //clientId: "mqtitId-" + new Date().getTime(),
        //clientId: 'mqtitId-Home',
        username: MQTT_USERNAME,
        password: MQTT_PASSWORD,
        clean: true
      },
      client:"",
      msg: "", //mqtt推送的消息
      cameraStatus:"",//摄像头的状态
      alertVideoFlag:"",//报警录像是否存在 true存在  false不存在
      loading:false,//页面加载的loading by guo 2020-3-23-13:55添加
      rowAlartId:"",

      //客户端绑定摄像头的信息
      rtc:"",
      toclientid:"RHZL-KVFH-TAX2-00000001",
      host:"webrtc.qq-kan.com",
      conmode:"live",
      consource:"MainStream",
    };
  },
  methods: {
    /* 
      mqtt 2020-2-28-10:50添加
    */
    mqttMSG() {
     this.client=mqtt.connect(MQTT_SERVICE, this.options);
      // mqtt连接
      this.client.on("connect", e => {
        console.log(e);
        console.log("连接成功:");
        let deviceNo = this.bedDeviceNo;//床垫的设备编号;
        let topic = "FRONT_CLIENT_" + deviceNo; // deviceNo 是守护佳床垫设备编号
        this.client.subscribe(topic, error => {
          console.log(topic,"topic")
          if (!error) {
            console.log("-----------------gzh: 订阅成功");
          } else {
            console.log("-----------------gzh: 订阅失败");
          }
        });
      });
      // 接收消息处理
      this.client.on("message", (topic, message) => {
        console.log("收到来自", topic, "的消息", message.toString());
        this.msg = message.toString();
        console.log(this.msg);
        this.msg = JSON.parse(this.msg);
        console.log(this.msg);
        if(this.msg.status=="online"){
          //by guo 2020-4-2 16:10修改
          //在离床
          if(this.msg.inBed==0){
            this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedZero;
          }else{
            this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").inBedOne;
          }
          //去除心跳为-1和0的数据
          if(this.msg.heartbeat!=-1 && this.msg.heartbeat!=0){
            this.lifeRoomInfo.heartbeat=this.msg.heartbeat;
          }else{
            this.lifeRoomInfo.heartbeat='--';
          }
          //去除呼吸为-1和0的数据
          if(this.msg.breath!=-1 && this.msg.breath!=0){
            this.lifeRoomInfo.breath=this.msg.breath;
          }else{
            this.lifeRoomInfo.breath='--';
          }
        }else{//离线 by guo 2020-3-2-21:55添加
          this.lifeRoomInfo.inBed=this.$t("m.roomGeneralViewManagement").offline;
          this.lifeRoomInfo.heartbeat='--';
          this.lifeRoomInfo.breath='--';
        }
      });
      // 断开发起重连
      this.client.on("reconnect", error => {
        console.log("正在重连:", error);
      });
      // 链接异常处理
      this.client.on("error", error => {
        console.log("连接失败:", error);
      });
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的播放
    */
    alarmVideoPlayClick(row){
      console.log(row);
      this.isFalshOpen();//先校验flash是否开启
      if(this.flashFlag==true){//flash开启了才能播放
        this.alertVideoShow(row);
      }else{//否则无法打开
        this.videoFlag=false;
      }  
      console.log(this.tableData);
      this.rowAlartId=row.alertId;//获取点击播放的录像的alertId
    },

    /* 
      by guo 2020-3-9-14:02添加
      报警录像的暂停
    */
    alarmVideoPushClick(row){
      console.log(row);
      this.tableData.forEach(item=>{
        console.log(item);
        if(row.alertId==item.alertId){
          item.videoPlayIconShow=true;
          this.videoFlag=false;//点击了警报视频停止按钮  警报录像视频播放隐藏 静态图片显示
        }
      })
      console.log(this.tableData);
    },

    /* 
      by guo 2020-3-10-13:07添加
      通过报警id查询警报录像
    */
    alertVideoShow(row){
      console.log(row);
      let params=new Object();
      params.alertId=row.alertId;
      console.log(params);
      this.loading=true;
      this.alertVideoFlag=false;//初始化报警录像的状态  by guo 2020-4-3-10:45添加
      this.$postForm(this.ports.roomGeneralViewManagement.alertVideoShowByWebRTC,params,this.acceptLanguage).then(res=>{
        console.log(res,"通过报警id查询警报录像");
        this.loading=false;
        if(res.code==200){
          if(res.result!=null){
            this.alertVideoFlag=true;//报警录像是否存在  true存在
            this.$set(this,"videoSrc",res.result.rtmpUrl);
            console.log(this.videoSrc);
            this.videoFlag=true;//点击了警报视频播放按钮  警报录像视频播放显示 静态图片隐藏
            this.urgencySureFlag=false;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
            this.$set(this.videoObjectPc,"video",this.videoSrc);
            console.log(this.videoObjectPc.video);
            this.initVideo();
            this.$message({type:"success",message:res.message});
            setTimeout(()=>{
              this.tableData.forEach(item=>{
                console.log(item);
                if(row.alertId==item.alertId){
                  console.log(this.alertVideoFlag,"this.alertVideoFlag")
                  if(this.alertVideoFlag==true){
                    item.videoPlayIconShow=false;
                  }
                }else{
                  item.videoPlayIconShow=true;
                }
              })  
            },500)
          }else{
            this.videoFlag=false;//静态图片显示  by guo 2020-4-2-17:34添加
            this.alertVideoFlag=false;//报警录像是否存在  false不存在  
            //by guo 2020-4-3-9:41 添加
            this.tableData.forEach(item=>{
              console.log(item);
              if(row.alertId==item.alertId){
                console.log(this.alertVideoFlag,"this.alertVideoFlag")
                if(this.alertVideoFlag==true){
                  item.videoPlayIconShow=false;
                }
              }else{
                item.videoPlayIconShow=true;
              }
            })  
            this.$message({type:"error",message:res.message});
          }
        }else{
          this.videoFlag=false;//静态图片显示 by guo 2020-4-2-17:34添加
          this.alertVideoFlag=false;//报警录像是否存在  false不存在
          this.rowAlartId="";//by guo 清空点击的报警id
          //by guo 2020-4-3-9:41 添加
          this.tableData.forEach(item=>{
            console.log(item);
            if(row.alertId==item.alertId){
              console.log(this.alertVideoFlag,"this.alertVideoFlag")
              if(this.alertVideoFlag==true){
                item.videoPlayIconShow=false;
              }
            }else{
              item.videoPlayIconShow=true;
            }
          })  
          this.queryDeviceAlertLifeRoom(this.roomId);
          this.$message({type:"error",message:res.message});
        }
      })
    },

    /* 
      RTMP流播放
    */
    initVideo(){
     
    },

    /* 
      通过webrtc方式查看摄像头视频
    */
    queryRtmpUrl(){
      console.log(this.deviceNo,"this.deviceNo");
      if(this.deviceNo!=null && this.deviceNo!=undefined && this.deviceNo!=""){
        let params=new Object();
        params.deviceNo=this.deviceNo;
        this.$postForm(this.ports.roomGeneralViewManagement.showByWebRTC,params,this.acceptLanguage).then(res=>{
          if(res.code==200){
            this.toclientid=res.result.toclientid;
            this.host=res.result.host;
            this.conmode=res.result.conmode;
            this.consourceres=res.result.consourceres;
            this.cameraStatus='online';//摄像头在线
          }else{
            this.cameraStatus='offline';//摄像头离线
            this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
            this.urgencySureFlag=false;//用于判断实时视频按钮的播放和切换  true--播放   false--停止
          }
        })
      }
    },

    pageInit() {
      var toclientid = "RHZL-KVFH-TAX2-00000001";
      var host = "webrtc.qq-kan.com";
      var conmode = "live";
      var consource = "MainStream";
      // var toclientid = this.toclientid;
      // var host = this.host;
      // var conmode = this.conmode;
      // var consource = this.consource;
      var webrtcclientid = this.uuid();

      if (conmode === "live" || conmode === "play") {
      } else {
        conmode = "live";
        consource = "MainStream";
      }
      var ishttps = "https:" == document.location.protocol ? true : false;
      if (ishttps) {
        this.rtc.connect(
          "wss://" + host + "/wswebclient/" + webrtcclientid,
          webrtcclientid,
          toclientid,
          conmode,
          consource
        );
      } else {
        this.rtc.connect(
          "ws://" + host + "/wswebclient/" + webrtcclientid,
          webrtcclientid,
          toclientid,
          conmode,
          consource
        );
      }
      console.log(
        "pageInit    --------------------------------------  mute = ",
        this.rtc.mute
      );
    },

    //动态生成一个uuid
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
      s[8] = s[13] = s[18] = s[23] = "-";
      var uuid = s.join("");
      return uuid;
    },

    //websocket的事件监听
    rtcSocket() {
      this.rtc.on("connected", socket => {
        this.rtc.createStream({
          video: true,
          audio: true
        });
      });
      this.rtc.on("stream_created", stream => {});
      this.rtc.on("pc_add_stream", (stream, socketId) => {
        this.rtc.attachStream(stream, "video");
      });
      this.rtc.on("stream_connected", Connection => {});
      this.rtc.on("socket_error", Connection => {});
      this.rtc.on("socket_closed", Connection => {
        console.log("socket_closed reconnect = ", this.rtc.reconnect);
        if (this.rtc.reconnect === true) {
          this.pageInit();
        }
      });

      this.rtc.on("equipment_message", message => {
        console.log("equipment_messaget ", message);
      });
      this.rtc.on("player_message", (channel, socketid, message) => {
        var json;
        json = JSON.parse(message);
        if (json.type === "__updateframeinfo") {
        }
      });
    },

    /* 
      查询图片
    */
    getPicture(deviceNo){
      if(deviceNo!=""){
        let params=new Object();
        params.deviceNo=deviceNo;
        console.log(params);
        this.$postForm(this.ports.roomGeneralViewManagement.getPicture,params,this.acceptLanguage).then(res=>{
          console.log(res,"查询拍摄的图片");
          if(res.code==200){
            if(res.result!=null){
              if(res.result.picture!=''){
                //var backgroundImage=res.result.picture;
                // this.picture='data:image/jpg;base64,'+backgroundImage;
                var backgroundImage=res.result.pictureUrl;//by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
                this.picture=backgroundImage;//by guo 2020-2-29-11:51修改  后端修改了图片返回的格式
              }else{
                this.picture="";
              }
            }else{
              this.picture="";
            }
          }
        })
      }
    },

    /* 
      设置房间的报警时长
    */
    handleSetAlarmTime(){
      let params=new Object();
      params.roomId=this.roomId*1;
      params.silentTime=this.silentTime;//报警屏蔽时间
      var res=/^[0-9]{1,3}$/;
      if(this.silentTime===0){
        console.log(this.silentStatus,this.silentStatusRoom);
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numNotZero,type:"error"});
      }else if(!res.test(this.silentTime)){
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numLength3,type:"error"});
      }else {
        this.$postJson(this.ports.roomGeneralViewManagement.roomSilentTime,params,this.acceptLanguage).then(res=>{
          console.log(res);
          if(res.code==200){
            this.queryRoomAlartStatus(this.roomId);
            this.$message({message:res.message,type:"success"});
          }else{
            this.$message({message:res.message,type:"error"});
          }
        })
      }
    },

    /* 
      设置报警屏蔽的开关
    */
    roomAlertStatus(){
      let params=new Object();
      params.roomId=this.roomId*1;
      params.silentTime=this.silentTime;//报警屏蔽时间
      var res=/^[0-9]{1,3}$/;
      if(this.silentTime===0){
        console.log(this.silentStatus,this.silentStatusRoom);
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numNotZero,type:"error"});
      }else if(!res.test(this.silentTime)){
        if(this.silentStatusRoom==false){
          this.silentStatus=false
        }
        this.$message({message:this.$t("m.roomGeneralViewManagement").numLength3,type:"error"});
      }else {
        this.$postJson(this.ports.roomGeneralViewManagement.roomAlertStatusTwo,params,this.acceptLanguage).then(res=>{
          console.log(res);
          if(res.code==200){
            this.queryRoomAlartStatus(this.roomId);
            this.$message({message:res.message,type:"success"});
          }else{
            this.$message({message:res.message,type:"error"});
          }
        })
      }
    },

    /* 
      报警屏蔽解除
    */
    deleteRoomAlertStatus(){
       this.$deleteList(this.ports.roomGeneralViewManagement.roomAlertStatus+this.roomId,{},this.acceptLanguage).then(res=>{
        console.log(res);
        if(res.code==200){
          this.queryRoomAlartStatus(this.roomId);
          this.$message({message:res.message,type:"success"});
        }else{
          this.$message({message:res.message,type:"error"});
        }
      })
    },

    /* 
      查询房间的报警状态
    */
    queryRoomAlartStatus(roomId){
      this.$getForm(this.ports.roomGeneralViewManagement.roomAlertStatus+roomId,{},this.acceptLanguage).then(res=>{
        console.log(res);
        if(res.code==200){
          this.silentTime=res.result.defaultSilentTime;
          this.silentStatus=res.result.silentStatus==0 ? false : true;
          this.silentStatusRoom=res.result.silentStatus==0 ? false :true;//用来判断房间是否设置了警报屏蔽
          if(this.silentStatusRoom==true){
            this.readonlySilentTime=true;
            this.disabledSetAlarmTime=true;
          }else{
            this.readonlySilentTime=false;
            this.disabledSetAlarmTime=false;
          }
        }
      })
    },

    /* 
      报警开关的change事件
    */
    changeSwitch(){
      console.log(this.silentStatus);
      return this.silentStatus==true ? this.roomAlertStatus() : this.deleteRoomAlertStatus();
    },

    /* 
      点击报警列表某一行
    */
    handleAlertClick(row, event, column){
      this.alertId=row.alertId;
      this.isHandle=row.isHandle;//获取报警处理的状态
    },

    /* 
      确认完成
    */
    handleSureComplete(){
      // this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
      //this.initVideo();//by guo 2020-3-22-23-54修改
      if(this.alertId!=""){
        if(this.isHandle==0){
          this.updateAlert(this.alertId);
        }else{
          this.$message({message:this.$t("m.roomGeneralViewManagement").hasdealalarm,type:"error"});
        }
      }else{
        this.$message({message:this.roomGeneralViewManagement.selectAlarmInfo,type:"error"});
      }
    },
    
    /* 
      CSV输出
    */
    handleCsvOutput(){
      if(this.tableData.length!=0){
        let params=new Object();
        params.roomId=this.roomId;
        params.groupId=this.groupId;
        if(this.timeValue!=""){
          params.startTime=this.timeValue[0]+" 00:00:00";
          params.endTime=this.timeValue[1]+" 23:59:59";
        }
        //判断是否传了开始时间和结束时间
        if(this.timeValue!=""){
          window.location.href = baseURL+this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoomToExcel+`?roomId=${params.roomId}&groupId=${params.groupId}&startTime=${params.startTime}&endTime=${params.endTime}`;
        }else{
          window.location.href = baseURL+this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoomToExcel+`?roomId=${params.roomId}&groupId=${params.groupId}`;
        }
      }else{
        this.$message({message:this.$t("m.roomGeneralViewManagement").noAlarmInfo,type:"error"});
      }
    },

    /* 
      返回列表
    */
    handleBackList(){
      bus.$emit("homePage",{type:"remove",path:"/RoomGeneralViewDetail",showpath:"/RoomGeneralViewManagement"});
    },

    /* 
      通过房间id获取设备编号和设备信息
    */
    queryDevice(roomId){
      console.log(roomId);
      this.$postJson(this.ports.roomGeneralViewManagement.queryDevice+roomId,{},this.acceptLanguage).then(res=>{
        if(res.code==200){
          if(res.result!=null || res.result.length!=0){
            for(var i=0;i<res.result.length;i++){
              if(res.result[i].deviceType==12){//deviceType==12为摄像头
                this.deviceNo=res.result[i].deviceNo;
                //this.cameraStatus=res.result[i].status;//by guo 2020-2-28-15:03添加 摄像头的状态
              }else if(res.result[i].deviceType==9){//deviceType==9为床垫
                this.bedDeviceId=res.result[i].deviceId;
                this.bedDeviceNo=res.result[i].deviceNo;
              }
            }
          }else{
            this.deviceNo="";
            this.bedDeviceId="";
          }
          console.log(this.deviceNo,this.bedDeviceId);
          this.queryRtmpUrl();
          this.getPicture(this.deviceNo);
          this.queryLifeRoomInfo(roomId);
        }
      })
    },

    /* 
      根据房间id查询房间的信息
    */
    queryLifeRoomInfo(roomId){
      this.$postJson(this.ports.roomGeneralViewManagement.queryLifeRoomInfo+roomId,{},this.acceptLanguage).then(res=>{
        console.log(res,"查询房间信息");
        if(res.code==200){
          this.lifeRoomInfo.roomNo=res.result[0].roomNo;
          this.lifeRoomInfo.oldName=res.result[0].oldName==null ? '--' : res.result[0].oldName;
          this.lifeRoomInfo.temperature=res.result[0].temperature==null ? '--' : res.result[0].temperature;
          //this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : this.$t("m.roomGeneralViewManagement").inBedOne));
          //by guo 2020-4-24-13:27 修改 添加了inBed=3为床垫离线
          this.lifeRoomInfo.inBed=(res.result[0].inBed==null && this.bedDeviceId!=undefined) ? this.$t("m.roomGeneralViewManagement").offline : ((res.result[0].inBed==null && this.bedDeviceId==undefined) ? '--' : (res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedZero : ( res.result[0].inBed==0 ? this.$t("m.roomGeneralViewManagement").inBedOne : this.$t("m.roomGeneralViewManagement").offline)));
          this.lifeRoomInfo.heartbeat=(res.result[0].heartbeat==-1 || res.result[0].heartbeat==null || res.result[0].heartbeat==0) ? '--' : res.result[0].heartbeat;
          this.lifeRoomInfo.breath=(res.result[0].breath==-1 || res.result[0].breath==null || res.result[0].breath==0) ? '--' : res.result[0].breath;
        }
      })
    },

    /* 
      查询报警列表按钮
    */
    serachAlarmTable(){
      console.log(this.timeValueTable);
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      查询房间报警列表
    */
    queryDeviceAlertLifeRoom(roomId){
      let params=new Object();
      params.roomId=roomId;
      params.pageNum=this.pageNum;
      params.pageSize=this.pageSize;
      if(this.timeValueTable!="" && this.timeValueTable!=null && this.timeValueTable!=undefined){
        params.startQueryTime=this.timeValueTable[0]+" 00:00:00";;
        params.endQueryTime=this.timeValueTable[1]+" 23:59:59";
      }
      console.log(this.rowAlartId,this.alertVideoFlag,"++++++++++--------")
      this.$postJson(this.ports.roomGeneralViewManagement.queryDeviceAlertLifeRoom,params,this.acceptLanguage).then(res=>{
        this.tableData=[];
        if(res.code==200){
          if(res.result.list!=null){
            this.pageSize=res.result.pageSize;
            this.currentPage=res.result.pageNum;
            this.totalDataNumber=res.result.total*1;
            // res.result.list.forEach(item=>{
            //   item.videoPlayIconShow=true;
            // })
            //by guo 2020-4-3-8:27修改
            res.result.list.forEach(item=>{
              if(this.rowAlartId==item.alertId){
                if(this.alertVideoFlag==true){
                  item.videoPlayIconShow=false;
                }
              }else{
                item.videoPlayIconShow=true;
              }
            })
            this.tableData=res.result.list;
          }else{
            this.tableData=[];
            this.pageSize=10;
            this.currentPage=1;
            this.totalDataNumber=0;
          }
        }else{
          this.tableData=[];
          this.pageSize=10;
          this.currentPage=1;
          this.totalDataNumber=0;
        }
      })
    },
    
    /* 
      处理报警列表
    */
    updateAlert(alertId){
      this.$postJson(this.ports.roomGeneralViewManagement.updateAlert+alertId,{},this.acceptLanguage).then(res=>{
        if(res.code==200){
          this.queryDeviceAlertLifeRoom(this.roomId);
          //this.$message({message:res.message,type:'success'});
          this.$message({message:this.roomGeneralViewManagement.hasdealalarmSuccess,type:"success"});//by guo 2020-3-18-12:11修改
          this.$bus.$emit("refreshalarmTitle");//通知去刷新首页报警提示和房一览信息页面
        }else{
          this.queryDeviceAlertLifeRoom(this.roomId);
          // this.$message({message:res.message,type:'error'});
          this.$message({message:this.roomGeneralViewManagement.hasdealalarm,type:"error"});//by guo 2020-3-18-12:11修改
        }
      })
    },

    /* 
      生体详情
    */
    handleDetail(){
      console.log(this.bedDeviceId);
      if(this.bedDeviceId!='' && this.bedDeviceId!=null && this.bedDeviceId!=undefined){
        sessionStorage.setItem("bedDeviceId",this.bedDeviceId);
        sessionStorage.setItem("bedDeviceNo",this.bedDeviceNo);
        bus.$emit("homePage", {
          type: "jump",
          path: "/LifesignDetail",
          title: this.roomGeneralViewManagement.vitalSignsViewDetail,
        });
      }else{
        this.$message({message:this.$t("m.roomGeneralViewManagement").unbindBed,type:"error"});
      }
    },

    /* 
      紧急确认
    */
    handleUrgencySure(){
      this.alertVideoFlag=false;//报警录像是否存在  false不存在
      this.rowAlartId="";//by guo 清空点击的报警id
      this.queryDeviceAlertLifeRoom(this.roomId);//重新刷新报警列表 播放录像按钮的状态
      if(this.deviceNo!=null && this.deviceNo!=undefined && this.deviceNo!=""){
        console.log(this.flashChecker().f)
        if(!this.flashChecker().f) {
          window.location.href = "http://get.adobe.com/cn/flashplayer/";
        }
        this.isFalshOpen();
        if(this.flashFlag==true){
          // if(!this.videoFlag){
          if(this.urgencySureFlag==false){//by guo 2020-3-23-16:50修改  通过这个来判断实时视频按钮的状态切换
            //先注释掉 guo 2020-2-28-15:34 
            if(this.cameraStatus=="online"){//by guo 2020-2-28-15:07修改 摄像头在线才能打开播放
              //先注释掉
              //this.$bus.$emit("closeWebsocketRoomVideo");//by guo 2020-1-21-11:33  添加 打开视频实时播放的时候 关闭websocket的连接   因为为了解决页面一直在推送报警卡顿的问题
              this.videoFlag=true;//点击了紧急确认按钮  视频码流播放显示 静态图片隐藏
              this.urgencySureFlag=true;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
              this.queryRtmpUrl();
            }else{
              this.$message({message:this.$t("m.roomGeneralViewManagement").cameraOffline,type:"error"});
            }
          }else{
            //先注释掉
            //this.$bus.$emit("openWebsocketRoomVideo");//by guo 2020-1-21-11:33 添加  关闭视频实时播放  打开websocket的连接  开启报警推送
            this.videoFlag=false;//点击了确认完成按钮  视频码流播放隐藏  静态图片显示
            this.urgencySureFlag=false;//by guo 2020-3-23-15:07添加  用于判断实时视频按钮的播放和切换  true--播放   false--停止
          }
        }
      }else{
        this.$message({message:this.$t("m.roomGeneralViewManagement").unbindCamera,type:"error"});
      }
    },

    /* 
      处理报警列表的报警类型
    */
    formatAlertType(row ,column, cellValue){
      switch(row.alertType) {
        case 0:
          return this.$t("m.roomGeneralViewManagement").alertTypeZero;
          break;
        case 1:
          return this.$t("m.roomGeneralViewManagement").alertTypeOne;
          break;
        case 2:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwo;
          break;
        case 3:
          return this.$t("m.roomGeneralViewManagement").alertTypeThree;
          break;
        case 4:
          return this.$t("m.roomGeneralViewManagement").alertTypeFour;
          break;
        case 5:
          return this.$t("m.roomGeneralViewManagement").alertTypeFive;
          break;
        case 6:
          return this.$t("m.roomGeneralViewManagement").alertTypeSix;
          break;
        case 7:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeven;
          break;
        case 8:
          return this.$t("m.roomGeneralViewManagement").alertTypeEigth;
          break;
        case 9:
          return this.$t("m.roomGeneralViewManagement").alertTypeNine;
          break;
        case 10:
          return this.$t("m.roomGeneralViewManagement").alertTypeTen;
          break;
        case 11:
          return this.$t("m.roomGeneralViewManagement").alertTypeEleven;
          break;
        case 12:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwelve;
          break;
        case 13:
          return this.$t("m.roomGeneralViewManagement").alertTypeThirteen;
          break;
        case 14:
          return this.$t("m.roomGeneralViewManagement").alertTypeFourteen;
          break;
        case 15:
          return this.$t("m.roomGeneralViewManagement").alertTypeFifteen;
          break;
        case 16:
          return this.$t("m.roomGeneralViewManagement").alertTypeSixteen;
          break;
        case 17:
          return this.$t("m.roomGeneralViewManagement").alertTypeSeventeen;
          break;
        //by guo 2020-3-9-11:56注释  需求变更  呼吸和心跳又合并为1个
        // case 18:
        //   return this.$t("m.roomGeneralViewManagement").alertTypeEighteen;
        //   break;
        case 20:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwenty;
          break;
        case 21:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyone;
          break;
        case 22:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentytwo;
          break;
        case 23:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentythree;
          break;
        case 24:
          return this.$t("m.roomGeneralViewManagement").alertTypeTwentyfour;
          break;
      }
    },

    /* 
      判断浏览器是否安装了flash
    */
    flashChecker() {
      var hasFlash = 0;　　　　 //是否安装了flash  
      var flashVersion = 0;　　 //flash版本  
      if(document.all) {
        var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if(swf) {
          hasFlash = 1;
          VSwf = swf.GetVariable("$version");
          flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
        }
      } else {
        if(navigator.plugins && navigator.plugins.length > 0) {
          var swf = navigator.plugins["Shockwave Flash"];
          if(swf) {
            hasFlash = 1;
            var words = swf.description.split(" ");
            for(var i = 0; i < words.length; ++i) {
              if(isNaN(parseInt(words[i]))) continue;
              flashVersion = parseInt(words[i]);
            }
          }
        }
      }
      console.log({ f: hasFlash, v: flashVersion });
      return { f: hasFlash, v: flashVersion };
    },

    /* 
      判断浏览器是否开启了flash
    */
    isFalshOpen(){
      var rtn=true;
      var isIE=!-[1];
      if(isIE){
        try{
          var swf1 = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        }
        catch(e){
          rtn=false;
        }
      }else{
        console.log("进来了-----------------------")
        try{
          var swf2=navigator.plugins['Shockwave Flash'];
          console.log(swf2,"swf2")
          if(swf2==undefined){
            rtn=false;
          }
        }
        catch(e) {
          
        }
      }
      console.log(rtn,"rtn")
      if(rtn==false){
        this.$alert(this.$t("m.roomGeneralViewManagement").openFlash, {
          confirmButtonText: this.$t("m.enter"),
          center: true,
          callback: action => {

          }
        });
        return this.flashFlag=false;
      }
    },

    /* 
      初始页currentPage、初始每页数据数pagesize和数据data
    */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      //改变每页显示的条数 
      this.PageSize=val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      当前页变化
    */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryDeviceAlertLifeRoom(this.roomId);
    },

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      //isHandle==0未处理的
      if (row.isHandle==0) {
        //return "background-color: #efefef";
        return "background-color: #ffffff;color:#3e4b53";
      } else {
        //return "background-color: #f9f9f9";
        return "background-color: #bee1f4;color:#3e4b53";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    },

  },
  computed: {
    player() {
      console.log(this.videoFlag,"------");
      if(this.videoFlag==true){
        return this.$refs.videoPlayer.player;
      }else{
        return this.$refs.videoPlayer.pause;
      }
    }
  },
  created() {
    this.groupId=sessionStorage.getItem("groupId");
    this.roomId=sessionStorage.getItem("lifeRoomDetail_roomId");
    this.queryDevice(this.roomId);
    this.queryDeviceAlertLifeRoom(this.roomId);
    this.queryRoomAlartStatus(this.roomId);
  },
  mounted() {
    this.rtc = SkyRTC();
    this.pageInit();
    this.rtcSocket();
    this.mqttMSG();
    //this.initVideo();//by guo 2020-3-23-0:05修改注释
    this.$bus.$on("changeLifeAlarm_websocket",()=>{
      console.log("接收到新的报警信息，刷新房间详情报警列表的数据--------房间一览详情");
      this.queryDeviceAlertLifeRoom(this.roomId);
    })
    if(sessionStorage.getItem('language')=='ja_JP'){
      this.languageClass=true;
    }else{
      this.languageClass=false;
    }
  },
  destroyed() {
    this.client.end();//断开mqtt的连接  组件销毁后需要断开mqtt的连接 否则后端就会一直推送消息影响性能
    //this.$bus.$emit("roomWebsocket");//先注释掉
  },
  components:{
    KtButton,
    videoPlayer,
  }
};
</script>
<style lang="scss" scoped>
.roomGeneralViewDetail {
  overflow-x: hidden;
  padding-bottom: 30px;
  .height40 {
    height: 50px;
    line-height: 50px;
    .height40-span {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
      img {
        vertical-align: middle;
        margin-right: 15px;
      }
    }
  }
  .height50 {
    height: 35px;
    line-height: 30px;
    .height50-itemName {
      color: #999999;
    }
  }
  .startTimeSecond{
    width:100px;
  }
  .roomGeneralViewDetail-c {
    // width: 50%;
    width: 68%;//by guo 2020-3-9-13:58修改
    max-height: 350px;
    margin:10px 0;
    // overflow-y: auto;
  }
  .roomGeneralViewDetail-d{
    width:50%;
    margin-top:20px;
  }
  .roomGeneralViewDetail-e{
    width:50%;
    margin:20px 0;
  }
  .roomGeneralViewDetail-f{
    margin: 30px 0 5px;
  }
  .btn0{
    background: #dddddd;
    color:#000000;
  }
  .btn1{
    background: #409efe;
    color:#ffffff;
  }
  .btn2{
    background: #fe0000;
    color:#ffffff;
  }
}
  /* 定义keyframe动画，命名为blink */
  @keyframes blink{
    0%{opacity: 1;}
    100%{opacity: 0;} 
  }
  /* 添加兼容性前缀 */
  @-webkit-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @-moz-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  @-ms-keyframes blink {
    0% {opacity: 1; } 
    100% { opacity: 0;}
  }
  @-o-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
  }
  /* 定义blink类*/
  .blink{
    color: #dd4814;
    animation: blink 1s linear infinite;  
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    -ms-animation: blink 1s linear infinite;
    -o-animation: blink 1s linear infinite;
  }
  /deep/ .vjs_video_817-dimensions {
    width: 600px !important;
    height: 420px !important;
  }
  /deep/ .roomGeneralViewDetail-c .el-pagination__total{
    margin-right:0px !important; 
  }
  /deep/ .roomGeneralViewDetail-c .el-pagination__jump{
    margin-left:0px !important;
  }
  .Ckplayer{
    margin: 0 auto;
    width: 100%;
    height: 420px;
    position: relative;
  }
  #video {
    width: 100%;
    height: 420px;
  }
  @media (min-width: 1024px){ 
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:350px;
    }
  }
  @media (min-width: 1100px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:90%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:14px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:370px;
    }
  }
  @media (min-width: 1366px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:75%;
        font-size:16px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:16px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:390px;
    }
  }
  @media (min-width: 1440px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:70%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:100%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:400px;
    }
  }
  @media (min-width: 1600px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:92%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:420px;
    }
  }
  @media (min-width: 1680px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:92%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:420px;
    }
  }
  @media (min-width: 1920px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:50%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:73%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:450px;
    }
  }
  @media (min-width: 2100px) {
    .roomGeneralViewDetail-a {
      margin-bottom: 30px;
      .alarmMessage{
        background: #f9d004;
        width:47%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
      .alarmMessageJp{
        background: #f9d004;
        width:65%;
        font-size:18px;
        font-weight: 700;
        margin-top:10px;
      }
    }
    .roomGeneralViewDetail-a-res{
      width:100%;
      height:470px;
    }
  }
</style>